<template>
  <div>
    <a-row>
      <a-col :span="12"  class='mb20'>
          <a-input  placeholder="请输入名称"  class='w200'/>
          <a-button type="primary">搜索</a-button>
      </a-col>
    </a-row>
    <a-row  class='mb20'>
      <a-col :span="6">   
            <a-button type="primary" icon="plus-circle"  @click='add'>新建</a-button>
        </a-col>
    </a-row>
    <a-table :columns="columns" :dataSource="data"  :pagination="pagination"  >
      <span slot="customTitle">名称</span>
      <span slot="modifyTime" slot-scope="text, record"  > 
        {{text | formatDate}}
      </span>
      <span slot="action" slot-scope="text, record"  > 
        <a  class='color-blue'  @click='edit(record.code)'>编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
            <a href="javascript:;"  class='color-red'>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <addRole  ref='roleModal' :visible='showAddRole'  :MenuData='MenuData'  v-on:handleCancel='showAddRole=false'  v-on:handleOk='handleOkRole()'></addRole>
  </div>
</template>

<script>
import  { RoleInit,delRole }  from  '@/api/system/index'
import  {  menuList  }  from  '@/api/system/jurisdiction'
import  addRole  from  '@/components/system/character/addRole'

export default {
  name: 'character',
  data () {
    return {
      columns:[{
        dataIndex: 'name',
        key: 'name',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'name' },
      }, {
        title: '描述',
        dataIndex: 'description',
        width:'25%',
      }, {
        title: '相关用户',
        dataIndex: 'userNum',
      },
      {
        title: '更新时间',
        // slots: { title: 'time' },
        dataIndex: 'modifyTime',
        scopedSlots: { customRender: 'modifyTime' },
      },{
        title: '创建人',
        dataIndex: 'createUserName',
      },  
       {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
      //
      search:{
        pageNo:1,
        pageSize:10
      },
    data:[],
    pagination:{
        total:0,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,

        pageSizeOptions: ["10", "20"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      }, 
     showAddRole:false,
     MenuData:[],
    }
  },
  created(){
    this.roleInit()
    this.menuInit()
  },
  methods:{
    roleInit(){
      RoleInit(this.search).then((res)=>{
        this.data = res.data.dataList
      })
    },
    menuInit(){
      menuList({pageSize:200}).then((res)=>{
        let data = res.data.dataList
        // this.MenuData =data
        this.MenuData = this.formTree(data)
      })
    },


    add(){
      this.$refs.roleModal.$emit('openDialog',)
      this.showAddRole = true
    },
    edit(code){
      this.$refs.roleModal.$emit('editDialog',code)
      this.showAddRole = true
    },
    handleOkRole(){
      this.showAddRole = false
      this.roleInit()
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    confirmDel(code){
      delRole(code).then((res)=>{
          this.$message.info(res.data.msg)
          this.roleInit()
      })
    },
     /*工具函数*/
    //data 转换为 树类型
    formTree(List){
        let data = [];

        List.forEach((item)=>{
          if( item.parentId == '0'){
              data.push({
                key:item.code,

                id:item.id,
                name:item.name,
                code:item.code,
                parentId:item.parentId,
                isMenu:item.isMenu,/*加入菜单 判断是否显示新增*/
                scopedSlots: { title: 'custom' },
              })
          }
        })
        // console.log(this.departList)
        return this.formNextTreeTest(List,data)
    },
    //二级及以上 树类型
    formNextTreeTest(List,data){
          data.forEach((item,index)=>{
          let child= []
          List.forEach((it)=>{
              if(item.id == it.parentId){
                  child.push({
                    key:it.code,

                    id:it.id,
                    name:it.name,
                    code:it.code,
                    parentId:it.parentId,
                    isMenu:it.isMenu,
                    scopedSlots: { title: 'custom' },
                  })
              }
            })
            item.children=child
            if(child.length>0){
                this.formNextTreeTest(List,child) //递归
            }
          })
          return data
    },
  },
  components:{
    addRole
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
